<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>FAST-PAGE</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="Description">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link href="./css.css" rel="stylesheet" />
</head>
<body>
  <div id="app">
    <div class="search-wrapper">
      <input v-model.trim="keyword" @keyup.enter="search" class="keyword-ipt" placeholder="输入搜索关键字" autofocus />
    </div>
    <div class="urls-wrapper">
      <div class="category-wrapper" v-for="(category, index) in urls" :key="index">
        <div class="category-name">{{category.category}}</div>
        <div class="url-item" @click="urlClick(url)" v-for="url in category.children" :key="url">
          <img class="url-favicon" v-if="url.icon" :src="url.icon" />
          <img class="url-favicon" v-else :src="url.url + 'favicon.ico'" />
          <span class="url-label">{{url.name}}</span>
        </div>
      </div>
    </div>
  </div>
  <script src="./vue.global.prod.js"></script>
  <script>
    const App = {
      data () {
        return {
          keyword: "",
          urls: [
            {
              category: "设计/素材",
              children: [
                { name: "千库网", url: "https://588ku.com/", icon: "./588ku.com.ico" },
                { name: "花瓣", url: "https://huaban.com/", icon: "./huaban.com.ico" },
                { name: "CG资源站", url: "http://www.cgzyw.com/", icon: "./www.cgzyw.com.ico" },
                { name: "Doyoudo", url: "https://www.doyoudo.com/", icon: "./www.doyoudo.com.ico" },
                { name: "素材集市", url: "http://www.sucaijishi.com/", icon: "./www.sucaijishi.com.ico" },
                { name: "Flaticon", url: "https://www.flaticon.com/", icon: "./www.flaticon.com.ico" },
                { name: "站酷", url: "https://www.zcool.com.cn/", icon: "./www.zcool.com.cn.ico" },
              ]
            }, {
              category: "技术论坛",
              children: [
                { name: "开源中国", url: "https://www.oschina.net/", icon: "./www.oschina.net.ico" },
                { name: "掘金", url: "https://juejin.im/", icon: "./juejin.im.ico" },
                { name: "老D博客", url: "https://laod.cn/", icon: "./laod.cn.ico" },
                { name: "Segmentfault", url: "https://segmentfault.com/", icon: "./cdn.segmentfault.com.ico" },
                { name: "简书", url: "https://www.jianshu.com/", icon: './www.jianshu.com.ico' },
                { name: "博客园", url: "https://www.cnblogs.com/", icon: './www.cnblogs.com.ico' },
                { name: "廖雪峰官网", url: "https://www.liaoxuefeng.com/", icon: './www.liaoxuefeng.com.ico' },
                { name: "W3school", url: "https://www.w3school.com.cn/", icon: "./www.w3school.com.cn.ico" },
              ]
            }, {
              category: "网络课程",
              children: [
                { name: "慕课网", url: "https://www.imooc.com/", icon: "./www.imooc.com.ico" },
              ]
            }, {
              category: "软件工具",
              children: [
                { name: "新趣集", url: "https://xinquji.com/", icon: "./xinquji.com.ico" },
                { name: "月情博客", url: "https://www.superbin.cc/", icon: "./www.superbin.cc.ico" },
                { name: "麦克派", url: "https://www.waitsun.com/", icon: "./www.waitsun.com.ico" },
              ]
            }, {
              category: "摸鱼休闲",
              children: [
                { name: "什么值得买", url: "https://post.smzdm.com/", icon: './post.smzdm.com.ico' },
                { name: "V2EX", url: "https://www.v2ex.com/", icon: "./www.v2ex.com.ico" },
                { name: "汽车之家", url: "https://www.autohome.com.cn/", icon: "./www.autohome.com.cn.ico" },
              ]
            }
          ]
        }
      },
      methods: {
        search () {
          if (this.keyword) {
            location.href = `https://www.baidu.com/s?ie=UTF-8&wd=${encodeURIComponent(this.keyword)}`
          }
        },
        urlClick (url) {
          location.href = url.url
        }
      }
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>
</html>
